.card {
	background-color: var(--color-primary-background);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--border-radius);
	overflow: hidden;
	padding: var(--size-large);
	transition: border-color 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
	width: 100%;

	&.noPadding {
		padding: 0;
	}

	&.full {
		height: 100%;
	}

	& h2,
	& .cardHeader {
		font-size: 22px !important;
		margin-bottom: var(--size-medium) !important;
	}

	& h3 {
		font-size: 16px !important;
		margin-bottom: var(--size-xSmall) !important;
	}

	& p {
		color: var(--color-gray-500);
		margin-top: 0 !important;
	}

	& section {
		padding-bottom: var(--size-medium);

		&:last-of-type {
			padding-bottom: var(--size-large);
		}
	}

	& .titleContainer {
		border-bottom: 1px solid var(--color-gray-300);
		font-size: 14px !important;
		margin: 0 calc(-1 * var(--size-large));
		margin-bottom: var(--size-small);
		margin-top: calc(-1 * var(--size-xSmall));
		padding-bottom: 0;
		padding-left: var(--size-large);
		padding-right: var(--size-large);
		padding-top: 0;

		&.noTitleBottomMargin {
			margin-bottom: 0;
		}

		& h3 {
			margin-bottom: var(--size-medium) !important;
		}
	}

	&:hover {
		&.interactable {
			border-color: var(--color-purple);
			box-shadow: 0 5px 8px rgba(86, 41, 198, 0.2);
		}
	}
}

.cardForm {
	display: flex;
	flex-direction: column;
	row-gap: var(--size-large);
}

.cardSubHeader {
	color: var(--color-gray-500) !important;
	font-size: 16px;
	line-height: 1.5 !important;
	margin-bottom: var(--size-large) !important;
}

.cardFormActionsContainer {
	display: flex;
	flex-direction: column;
	row-gap: var(--size-medium);
}